import {env} from "../../../env/env";
import {getLoginToken} from "../../../service/user";
import {showToastError, showToastSuccess} from "../../../utils/tool";
import {str2arr} from "../../../utils/str";

const app = getApp()
const imageUrl = app.globalData.imageUrl
const wxAccount = wx.getAccountInfoSync()
const {appId} = wxAccount.miniProgram
Component({
    properties: {
        value:{
            type:[Object], value:'',
            observer(data){
                data = str2arr(data)    // 转为数组
                if (data){
                    const list = data.map(item => {
                        return {
                            url: imageUrl + item,
                            status: 'done',
                        }
                    })
                    this.setData({
                        fileList:list,
                        _value:data,
                    })
                }
            }
        },
    },
    data: {
        fileList: [],
        _value:[],
    },
    methods: {
        handleAdd(e) {
            const { fileList } = this.data;
            const { files } = e.detail;

            // 方法1：选择完所有图片之后，统一上传，因此选择完就直接展示
            // this.setData({
            //     fileList: [...fileList, ...files], // 此时设置了 fileList 之后才会展示选择的图片
            // });

            // 方法2：每次选择图片都上传，展示每次上传图片的进度
            files.forEach(file => this.onUpload(file))
        },
        onUpload(file) {
            let { fileList, _value } = this.data;

            this.setData({
                fileList: [...fileList, { ...file, status: 'loading' }],
            });
            const { length } = fileList;

            const task = wx.uploadFile({
                header:{
                    Authorization: "Bearer " + getLoginToken(),
                    appid: appId,
                    'uni-platform': 'mp-weixin',
                },
                url: `${env.host}/uniapp/upload/uploadFile`, // 仅为示例，非真实的接口地址
                filePath: file.url,
                name: 'file',
                formData: { fileType: 'image' },
                success: (res) => {
                    const data = JSON.parse(res.data)
                    if (data.error==0){
                        const resFile = data.file
                        _value.push(resFile.path)
                        this.setData({
                            _value,
                            [`fileList[${length}].status`]: 'done',
                        });

                        this.triggerEvent("change", {
                            value:_value,
                        })

                    }else{
                        showToastError(data.msg)
                    }


                },
            });
            task.onProgressUpdate((res) => {
                this.setData({
                    [`fileList[${length}].percent`]: res.progress,
                });
            });
        },
        handleRemove(e) {
            const { index } = e.detail;
            const { fileList, _value } = this.data;


            fileList.splice(index, 1);
            _value.splice(index,1);

            this.triggerEvent("change", {
                value:_value
            })

            this.setData({
                value:_value,
                fileList,
            });
        },
    },
});
